<template>
    <div>
      <div class="cz">
        <!-- 基础信息 -->
        <div name="基础信息">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <h3>基础信息</h3>
            </div>
            <!-- 主体 -->
            <div name="主体">
              <el-form
                :inline="true"
                class="demo-form-inline"
                ref="form"
                :model="form"
                label-width="80px"
              >
                <el-form-item label="进货单号">
                  <el-input class="kuan1" readonly @blur="JHDH" v-model="jhdh"></el-input>
                </el-form-item>
  
                <el-form-item class="kuan2" label="进货日期">
                  <el-date-picker
                    class="kuan1"
                    v-model="form.jhrq"
                    type="date"
                    placeholder="选择日期"
                  >
                  </el-date-picker>
                </el-form-item>
  
                <el-form-item label="供应商">
                  <el-select
                    v-model="form.gysbh"
                    @change="GYSTjSelect()"
                    clearable
                    placeholder="请选择"
                    :style="{ width: '300px' }"
                  >
                    <el-option
                      v-for="item in Adate"
                      :key="item.supply_code"
                      :label="item.supply_name"
                      :value="item.supply_code"
                    >
                    </el-option>
                  </el-select>
                  <el-link
                    style="margin-left: 15px"
                    type="success"
                    :underline="false"
                    >设置</el-link
                  >
                </el-form-item>
  
                <el-form-item style="margin-left: 76px" label="联系人">
                  <el-input
                    class="kuan1"
                    :disabled="true"
                    v-model="lxr"
                  ></el-input>
                </el-form-item>
  
                <el-form-item label="联系方式">
                  <el-input
                    class="kuan1"
                    :disabled="true"
                    v-model="lxfs"
                  ></el-input>
                </el-form-item>

                <el-form-item class="kuan2" label="进货部门">
                  <el-select
                    v-model="form.jhr"
                    clearable
                    placeholder="请选择"
                    :style="{ width: '300px' }"
                  >
                    <el-option label="张三" value="张三"></el-option>
                    <el-option label="李四" value="李四"></el-option>
                    <el-option label="王五" value="王五"></el-option>
                    <el-option label="赵六" value="赵六"></el-option>
                  </el-select>
                </el-form-item>
  
                <el-form-item class="kuan2" label="进货人" style="margin-right: -379px;">
                  <el-select
                    v-model="form.jhr"
                    clearable
                    placeholder="请选择"
                    :style="{ width: '300px' }"
                  >
                    <el-option label="张三" value="张三"></el-option>
                    <el-option label="李四" value="李四"></el-option>
                    <el-option label="王五" value="王五"></el-option>
                    <el-option label="赵六" value="赵六"></el-option>
                  </el-select>
                </el-form-item>
  
                <el-form-item label="备注">
                  <el-input
                    class="kuan1"
                    :autosize="{ minRows: 6, maxRows: 10 }"
                    placeholder="请输入内容"
                    style="width: 800px"
                    type="textarea"
                    v-model="form.desc"
                  />
                </el-form-item>
              </el-form>
            </div>
          </el-card>
        </div>
        <!-- 基础信息 -->
  
        <!-- 进货明细 -->
        <div name="进货明细">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <h3>进货明细</h3>
            </div>
            <!-- 主体 -->
            <div name="主体">
              <!-- 按钮 -->
              <div class="grid-content bg-purple">
                <div style="margin-bottom: 10px">
                  <el-button type="success" @click="TjCha()">添加</el-button>
                  <el-button @click="handleClick">移除</el-button>
                </div>
              </div>
  
              <!-- 主体 -->
              <div>
                <el-table
                  :data="BDate"
                  border
                  ref="myTable"
                  height="250"
                  style="width: 100%"
                  @selection-change="handleSelectionChange"
                >
                  <el-table-column type="selection" width="55"> </el-table-column>
  
                  <el-table-column prop="id" label="序号"> </el-table-column>
  
                  <el-table-column prop="item_name" label="货品名称">
                  </el-table-column>
  
                  <el-table-column prop="item_code" label="货品编号" width="200">
                  </el-table-column>
  
                  <el-table-column prop="model_code" label="规格型号">
                  </el-table-column>
  
                  <el-table-column prop="unit" label="单位"> </el-table-column>
  
                  <el-table-column label="货品数量" width="200">
                    <template #default="{ row }">
                      <el-input-number
                        @blur="JS1(row)"
                        v-model="row.buy_num"
                        :min="0"
                        :max="12000"
                      />
                    </template>
                  </el-table-column>
  
                  <el-table-column prop="inbill_price" label="进货单价">
                  </el-table-column>
  
                  <el-table-column label="金额">
                    <template #default="{ row }">
                      {{ row.buy_num * row.inbill_price }}
                    </template>
                  </el-table-column>
  
                  <el-table-column label="备注">
                    <template>
                      <el-input v-model="bz" width="200"></el-input>
                    </template>
                  </el-table-column>
  
                  <el-table-column fixed="right" label="操作" width="100">
                    <template slot-scope="scope">
                      <el-button
                        @click="handleClick(scope.row)"
                        type="text"
                        size="small"
                        >移除</el-button
                      >
                    </template>
                  </el-table-column>
                </el-table>
              </div>
              <div style="float: right">
                <el-button @click="GuanBi()">关闭</el-button>
                <el-button @click="BaoCun()">保存并新增</el-button>
                <el-button @click="BaoCun1()" type="success">保存</el-button>
              </div>
            </div>
          </el-card>
        </div>
        <!-- 进货明细 -->
      </div>
      <el-dialog title="添加货品" :visible.sync="dialogVisible" width="45%">
        <div>
          <el-card class="box-card1">
            <div>
              <!-- 头部 -->
              <el-form :inline="true" class="demo-form-inline">
                <el-input
                  style="width: 200px"
                  v-model="tj"
                  placeholder="请输入货品编号/名称"
                ></el-input>
  
                <el-form-item class="block">
                  <el-button @click="Qing()">重置</el-button>
                  <el-button type="success" @click="dj()">查询</el-button>
                </el-form-item>
              </el-form>
  
              <!-- 头部 尾 -->
              <el-table
                :data="Cdate"
                ref="MyDate"
                border
                height="250"
                @select="handleSelection"
                style="width: 100%"
              >
                <el-table-column fixed type="selection" width="55" />
                <el-table-column fixed width="50" label="序号" prop="id" />
                <el-table-column fixed prop="item_code" label="货品编号" />
                <el-table-column fixed prop="item_name" label="货品名称" />
                <el-table-column fixed prop="model_code" label="规格型号" />
                <el-table-column fixed prop="unit" label="单位" />
                <el-table-column fixed prop="inbill_price" label="入库单价" />
              </el-table>
  
              <div class="block">
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="this.dqy"
                  :page-sizes="[4, 8, 16, 24]"
                  :page-size="this.mys"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="this.zts"
                >
                </el-pagination>
              </div>
            </div>
          </el-card>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="hpxxhq()">确 定</el-button>
        </span>
      </el-dialog>

    </div>
  </template>

<script>
import moment from "moment";
import $http from "@/http/base.js";
import xlsx from "xlsx";

export default {
  data() {
    return {
      form: {
      },
      value1: "",
      Adate: [],
      gysbh: "",

      input: "",
      lxr: "",
      lxfs: "",
      dialogVisible: false,
      tj: "",
      Cdate: [],
      mys: 4,
      dqy: 1,
      zts: 0,
      //表单信息
      BDate: [],
      BDDate1: [],
      //货品数量
      buy_num: "",
      //金额
      zong: 0,
      bz: "",
      selectedItems: [],
      currenTime: null,
      currenTime1: null,
      currenTime2:null,
      jhdh: "",
      ZongDX: {},
      create_by: "admin",
      serialNumberMap: {},//记录每个时间生成的序号
    };
  },
  methods: {
    //供应商下拉框
    GYSSelect(){
        $http
            .get('api/wh_Buy_Order_h/GYSXlkSelect')
            .then(res =>{
              this.Adate = res
              console.log(this.Adate)
            })
            .catch(err =>{
              console.log(err)
            })
    },
    //根据供应商下拉框查询联系人和联系方式
    GYSTjSelect(){
      $http
          .get('api/wh_Buy_Order_h/GYSTjSelect?tj='+this.form.gysbh)
          .then(res =>{
            //联系人
            this.lxr = res.link_man
            //联系方式
            this.lxfs = res.link_tel
          })
          .catch(err =>{
            console.log(err)
          })
    },
    //进货单号  拼接
    JHDH() {
      const currentDate = this.getCurrentDate(); // 获取当前年月日

      if(!this.serialNumberMap[currentDate]){
        // 如果当前时间戳下还没有生成过序号，初始化为001
        this.serialNumberMap[currentDate] = 1;
      }else {
        // 如果当前时间戳下已经生成过序号，序号加1
        this.serialNumberMap[currentDate]++;
      }
      // 生成最终的序号，格式为 "jhdh+当前时间戳+序号"
      this.jhdh = `JHDH${currentDate}${this.serialNumberMap[currentDate].toString().padStart(3, '0')}`;
      console.log(this.jhdh)
    },
    BaoCun(){
      this.getCurrentTime();
      this.ShiJIan(this.form.jhrq);
      console.log(this.jhdh)
      console.log("选中的信息")
      console.log(this.selectedItems)
      $http
        .post('api/wh_Buy_Order_h/Insert',{
          jhzb:{
            buy_code: this.jhdh,
            buy_date: this.form.jhrq,
            supply_code: this.form.gysbh,
            link_man: this.lxr,
            link_way: this.lxfs,
            buy_man: this.form.jhr,
            create_by: this.create_by,
            create_time: this.currenTime1,
            remark: this.form.desc,
          },
          jhmxs:this.selectedItems,
        })
        .then(res =>{
          this.TiShiCG('增加')
          console.log(res)
        })
        .catch(err =>{
          this.TiShiSB('增加')
        })
    },
    BaoCun1(){
      this.BaoCun()
      this.GuanBi()
    },
    //获取当前时间
    getCurrentTime(){
      const date = new Date();
      const year = date.getFullYear();
      const month = ("0" + (date.getMonth() + 1)).slice(-2);
      const day = ("0" + date.getDate()).slice(-2);
      const hours = ("0" + date.getHours()).slice(-2);
      const minutes = ("0" + date.getMinutes()).slice(-2);
      const seconds = ("0" + date.getSeconds()).slice(-2);

      this.currenTime = `${year}${month}${day}${hours}${minutes}`;
      this.currenTime1 = `${year}-${month}-${day}`;
      this.currenTime2 = `${year}${month}${day}`;
    },
    //编号获取当前日期
    getCurrentDate(){
      const date = new Date();
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，所以加1
      const day = String(date.getDate()).padStart(2, '0'); // 日期可能是一位数，所以补0

      return `${year}${month}${day}`
    },
    //获取信息
    handleSelectionChange(val) {
      this.selectedItems = val.map((row) => ({
        ...row,
        buy_price: row.buy_num * row.inbill_price, // 计算 buy_price 和 inbill_price 的乘积作为 amount
        buy_num: row.buy_num,
      }));
      console.log("表单选中信息：" + JSON.stringify(this.selectedItems)); // 这里的 val 就是选中的行数据1
    },
    //单个货品计算
    JS1(row) {
      console.log(row);
      const buy_price = row.buy_num; // 获取当前输入框中的值
      this.zong = row.buy_num * row.inbill_price;
      console.log("总金额为：" + this.zong);
    },
    //货品信息获取 复选框
    handleSelection(selection) {
      this.BDDate1 = selection;
      console.log(selection)
    },
    //货品信息获取 按钮
    hpxxhq() {
      this.BDate = [];
      this.BDate = this.BDDate1;
      this.dialogVisible = false;
    },
    //货品信息查询
    cha() {
      $http
        .get(
          "api/wh_Buy_Order_h/BsItemSelect?mys=" +
            this.mys +
            "&dqy=" +
            this.dqy +
            "&tj=" +
            this.tj +
            ""
        )
        .then((res) => {
          this.Cdate = res.list;
          this.zts = res.zts;
          console.log(res.list);
        })
        .catch((err) => {
          this.TiShiSB("删除");
          console.log(err);
        });
    },
    //货品信息 弹框
    TjCha() {
      this.cha()
      this.dialogVisible = true;
    },
    //移除
    handleClick(){

    },
    //重置按钮
    Qing() {
      this.tj = "";
    },
    //点击查询
    dj() {
      this.cha();
    },
    //操作提示 --成功
    TiShiCG(xx) {
      this.$message({
        message: xx + "操作成功!",
        type: "success",
      });
    },
    //操作提示 --失败
    TiShiSB(xx) {
      this.$message.error(xx + "操作失败");
    },
    //条数改变
    handleSizeChange(val) {
      this.mys = val;
      this.cha();
    },
    //页数改变
    handleCurrentChange(val) {
      this.dqy = val;
      this.cha();
    },
    //时间格式变换
    ShiJIan(sj) {
      const dateStr = sj;

      // 创建一个新的 Date 对象来表示这个日期
      const date = new Date(dateStr);

      // 使用 Date 对象的 getXXX() 方法来获取不同部分的日期信息
      // 在这个例子中，我们只需要年、月、日三个信息
      const year = date.getFullYear();
      const month = date.getMonth() + 1; // 月份从 0 开始，因此需要加 1
      const day = date.getDate();
      const formattedDate = `${year}-${month.toString().padStart(2, "0")}-${day
        .toString()
        .padStart(2, "0")}`;
      this.form.jhrq = formattedDate;
    },
    GuanBi(){
      this.$router.push({
        path:"/WHOM_SelectZB" //跳转的页面
      })
    },
  },

  computed: {},
  mounted() {
    this.GYSSelect()
    this.JHDH()
  },
};
</script>


<style scoped>
.cz {
  margin-left: 80px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}

.box-card {
  width: 1000px;
  margin-top: 35px;
}

.box-card1 {
  width: 100%;
}

.kuan1 {
  width: 300px;
}

.kuan2 {
  margin-left: 120px;
}

/* .dibu {
  position: absolute;
  bottom: 0;
  width: 100%;
} */

.block {
  float: right;
}
</style>